<template>
  <div class="songlist-detail">
    <div class="nav-bar" :class="isFixed ? 'active' : ''" id="toolbar">
      <nav-bar :title="tabTitle"></nav-bar>
    </div>
    <div class="info">
      <div class="top">
        <div class="avatar">
          <img :src="songlistData.coverImgUrl" />
        </div>
        <div class="text">
          <h2 class="title">{{songlistData.name}}</h2>
          <div class="user">
            <div class="user-avatar">
              <img :src="createData.avatarUrl" />
            </div>
            <p class="nickname">{{createData.nickname}}</p>
          </div>
          <div class="desc">
            <p>{{songlistData.description | songDesc}}</p>
            <span class="iconfont niceiconfontyoujiantou-copy-copy-copy-copy"></span>
          </div>
        </div>
      </div>
      <div class="foot">
        <div class="item">
          <span class="iconfont niceshoucang"></span>
          <p class="colorOp8">{{tranNumber(songlistData.subscribedCount)}}</p>
        </div>
        <div class="item">
          <span class="iconfont niceyanlun"></span>
          <p class="colorOp8">{{songlistData.commentCount}}</p>
        </div>
        <div class="item">
          <span class="iconfont nicefenxiang"></span>
          <p class="colorOp8">{{songlistData.shareCount}}</p>
        </div>
        <div class="item">
          <span class="iconfont niceicon_bofangliang"></span>
          <p class="colorOp8">{{tranNumber(songlistData.playCount)}}</p>
        </div>
      </div>
    </div>
    <div class="lists" id="toolbar">
      <div class="title">
        <span class="dot left"></span>
        <span class="dot right"></span>
      </div>
      <div class="top" @click="sequencePlayAll">
        <span class="iconfont niceicon-9"></span>播放全部
      </div>
      <song-item @playerSelect="playerItem" :songlists="songlists"></song-item>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/Navbar'
import songItem from '@/components/songItem/songItem'
import { mapActions } from 'vuex'
export default {
  name: 'songlistDetail',
  data () {
    return {
      songlists: [],
      tabBorder: false,
      tabTitle: '歌单',
      collectNum: 10,
      songlistData: {},
      createData: {},
      offsetTop: 0,
      isFixed: false
    }
  },
  computed: {
    tranNumber () {
      return (num) => {
        return this.utils.tranNumber(Number(num), 0)
      }
    }
  },
  components: {
    NavBar,
    songItem
  },
  filters: {
    songDesc (desc) {
      if (desc && desc.length > 25) {
        desc = desc.substring(0, 25) + '...'
      }
      return desc
    }
  },
  methods: {
    // 获取歌单详情及歌单列表
    async getSonglistDetail () {
      try {
        let res = await this.$api.getSonglistDetail(this.$route.query.id, this.collectNum)
        this.songlistData = res.playlist
        this.createData = res.playlist.creator
        this.songlists = res.playlist.tracks
      } catch (error) {
        console.log(error)
      }
    },
    // 点击播放歌曲
    playerItem (item, index, url) {
      this.selectPlay({
        list: this.songlists,
        index,
        url
      })
    },
    sequencePlayAll () {
      this.sequencePlay({
        list: this.songlists
      })
    },
    ...mapActions([
      'selectPlay',
      'sequencePlay'
    ])
  },
  mounted () {
    window.addEventListener('scroll', () => {
      this.offsetTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.offsetTop > 50) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }, true)
    this.getSonglistDetail()
  },
  activated () {
    this.getSonglistDetail()
  }
}
</script>

<style lang="stylus" scoped>
.songlist-detail {
  width: 100%;
  min-height: 100%;

  .nav-bar {
    width: 100%;
    height: 46px;
    background: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s;

    &.active {
      background: url('../../assets/images/bg.png') no-repeat top;
      background-size: cover;
    }
  }
}

.info {
  width: 100%;
  height: 6rem;
  background-image: url('../../assets/images/top-bg.jpg');
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 1.32rem 0.3rem 0;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(23, 36, 55, 0.6);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .top {
    display: flex;

    .avatar {
      width: 2.4rem;
      height: 2.4rem;
      border-radius: 0.08rem;
      position: relative;
      margin-right: 0.3rem;

      &:before {
        content: '';
        width: 95%;
        height: 95%;
        background: rgba(255, 255, 255, 0.8);
        display: block;
        position: absolute;
        top: 0.2rem;
        right: -0.1rem;
        z-index: 0;
        border-radius: 0.08rem;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.08rem;
        position: relative;
      }
    }

    .text {
      width: 100%;
      display: flex;
      height: 2.4rem;
      position: relative;
      flex-direction: column;
      padding-top: 0.15rem;
      flex: 1;

      .title {
        font-size: 0.28rem;
        color: #ffffff;
        margin-bottom: 0.2rem;
        line-height: 1.376;
      }

      .user {
        display: flex;
        align-items: center;
        margin-bottom: 0.2rem;

        .user-avatar {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
          margin-right: 0.15rem;

          img {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
          }
        }

        .nickname {
          font-size: 0.24rem;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .desc {
        line-height: 1.376;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.2rem;
          width: 100%;
          flex: 1;
          margin-left: 0.05rem;
        }

        span {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.3rem;
        }
      }
    }
  }

  .foot {
    display: flex;
    margin-top: 0.45rem;
    position: relative;

    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        color: #fff;
        font-size: 0.4rem;
        margin-bottom: 0.2rem;
      }

      p {
        font-size: 0.26rem;
      }
    }
  }
}

.lists {
  width: 100%;
  min-height: 100%;
  background: url('../../assets/images/bg.png') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  margin-top: -0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0rem 0.3rem 1.3rem;
  left: 0;

  .title {
    width: 100%;
    position: absolute;
    top: 0.4rem;
    left: 0rem;
    padding: 0 0.3rem;

    h2 {
      position: absolute;
      font-size: 0.4rem;
      color: #fff;
      bottom: 1.2rem;

      b {
        font-size: 0.6rem;
      }
    }

    p {
      position: absolute;
      font-size: 0.24rem;
      color: #fff;
      bottom: 0.75rem;
    }

    .dot {
      width: 0.08rem;
      height: 0.25rem;
      border-radius: 0.1rem;
      background: #ff5b73;
      display: block;
      position: absolute;
      top: -0.55rem;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.8);

      &.left {
        left: 1rem;
      }

      &.right {
        right: 1rem;
      }
    }
  }

  .top {
    color: #fff;
    display: flex;
    align-items: center;
    height: 0.9rem;
    margin-bottom: 0.1rem;

    span {
      margin-right: 0.1rem;
    }
  }

  // .item-wrapper {
  //   .item {
  //     width: 100%;
  //     height: 0.75rem;
  //     display: flex;
  //     margin-bottom: 0.35rem;
  //     align-items: center;

  //     .number {
  //       font-size: 0.3rem;
  //       margin-right: 0.25rem;
  //     }

  //     .pic {
  //       width: 0.75rem;
  //       height: 0.75rem;
  //       border-radius: 0.08rem;
  //       margin-right: 0.2rem;

  //       img {
  //         width: 0.75rem;
  //         height: 0.75rem;
  //         border-radius: 0.08rem;
  //       }
  //     }

  //     .txt {
  //       display: flex;
  //       flex-direction: column;
  //       align-items: flex-start;
  //       justify-content: center;
  //       flex: 1;
  //       width: 60%;

  //       .name {
  //         font-size: 0.28rem;
  //         color: rgba(255, 255, 255, 1);
  //         margin-bottom: 0.13rem;
  //         width: 90%;
  //         white-space: nowrap;
  //         text-overflow: ellipsis;
  //         -o-text-overflow: ellipsis;
  //         overflow: hidden;
  //       }

  //       .author {
  //         font-size: 0.24rem;
  //         color: rgba(255, 255, 255, 0.6);
  //         width: 100%;
  //         white-space: nowrap;
  //         text-overflow: ellipsis;
  //         -o-text-overflow: ellipsis;
  //         overflow: hidden;

  //         span {
  //           &:after {
  //             content: '/';
  //             margin: 0 0.06rem;
  //           }

  //           &:last-child:after {
  //             content: '';
  //           }
  //         }
  //       }
  //     }

  //     .more {
  //       color: rgba(255, 255, 255, 0.8);
  //       font-size: 0.4rem;
  //     }
  //   }
  // }
}
</style>
